<template>
	<scroll id="tab-menu" ><!-- :observeDOM="true" -->
		<div class="menu-list">
			<div class="menu-list-item"
			:class="{active: index===currentIndex}"
			v-for="(item, index) in categories"
			:key="index"
			@click="itemClick(index)">
			{{item.title}}
			</div>
		</div>
	</scroll>
</template>

<script>
	import Scroll from 'components/common/scroll/Scroll.vue'
	export default{
		name:'TabMenu',
		components:{
			Scroll
		},
		props:{
			categories:Array
		},
		data(){
			return{
				currentIndex: 0
			}
		},
		methods:{
			itemClick(index){
				this.currentIndex = index;
				this.$emit('selectItem',index)
			}
		}
	}
</script>

<style scoped>
	#tab-menu{
		background-color: #F6F6f6;
		height: 100%;
		width: 100px;
	}
	.menu-list{
		padding-bottom:14px;
		
	}
	.menu-list-item{
		height: 45px;
		line-height: 45px;
		text-align: center;
		font-size: 14px;
	}
	.menu-list-item.active{
		font-weight: 700;
		color: #ff5577;
		background-color: #fff;
		border-left: 3px solid #ff5577;
	}
	
</style>
